import { Col, Form, Row } from 'antd'
import type { ColProps, FormItemProps, FormProps, RowProps } from 'antd/lib'

export const AntdRow = (props: RowProps) => (
  <Row gutter={{ xs: 8, sm: 8, md: 8, lg: 12, xl: 24 }} {...props} />
)

export const AntdCol = (props: ColProps) => (
  <Col span={24} xs={24} sm={12} md={8} lg={8} xl={6} {...props} />
)

type AntdFormProps<T> = Omit<FormProps<T>, 'children'> & { children?: React.ReactNode }
export function AntdForm<T>(props: AntdFormProps<T>) {
  return <Form<T> labelCol={{ span: 7 }} wrapperCol={{ span: 17 }} {...props} />
}

export const AntdFormColItem = (props: FormItemProps) => (
  <AntdCol>
    <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 17 }} {...props} />
  </AntdCol>
)
